Skip to content
lab components / Actions and controls

Action Bar

Action bar is a container, houses horizontally aligned buttons that enable users to act on single or multiple items.

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { ActionBar } from "@siteimprove/fancylab";

#Examples

A gray background container bar featuring a single primary action button. Ideal for simple tasks requiring only one action (e.g., "Submit", "Save")

The ActionBar consists of:

  • Container Bar: Provides visual separation with a gray background. This can be removed for a more integrated look by adding the noBackground property.
  • Buttons: Right-aligned buttons are the only controls allowed in an Action Bar. They trigger actions and should be limited to a maximum of 3.
    • Primary: The main action (e.g., "Save", "Submit"). Use only once.
    • Secondary: Less prominent actions (e.g., "Edit", "Add another").
    • Cancel (Default): For neutral actions (e.g., "Cancel", "Close", "Reset")
    • Destructive (Red): For irreversible actions (e.g., "Delete").
<ActionBar primary={{ children: "Primary", onClick: console.log }} />

#Loading

Provides visual feedback during action processing by using a spinner to indicate loading, preventing duplicate actions.

const [inProgress, setInProgess] = useState<string | null>(null); async function handler(action: string) { setInProgess(action); await delay(3000); setInProgess(null); } return ( <ActionBar inProgressAction={inProgress} primary={{ children: "Primary", onClick: handler }} secondaries={[{ children: "Secondary", onClick: handler }]} cancel={{ children: "Cancel", onClick: console.log }} /> );

Navigating users to new tabs or internal pages. Uses primary and secondary buttons for visual distinction. You can use label to indicate if the link opens in a new tab.

Navigate in this tab
Opens in new tab
Open new tab
<ActionBar primary={{ children: "Open new tab", href: "https://siteimprove.com", openNew: true }} secondaries={[{ children: "Navigate in this tab", href: "https://siteimprove.com" }]} />

#No padding

Seamlessly integrating the Action Bar with adjacent elements. Useful when the Action Bar needs to blend visually with its surroundings.

<ActionBar primary={{ children: "Primary", onClick: console.log }} noPadding />

#No background

Prioritizing content over the Action Bar background. Employ when the Action Bar needs to be minimally intrusive, allowing the content to take precedence.

<ActionBar primary={{ children: "Primary", onClick: console.log }} noBackground />

#Properties

PropertyDescriptionDefinedValue
primaryRequired
objectThe primary action
secondariesOptional
object[]Possible secondary actions
cancelOptional
objectPossible cancellation action
noPaddingOptional
booleanAn Action Bar without any padding
noBackgroundOptional
booleanAn Action Bar without any background
destructiveOptional
objectPossible destructive action, use `DestructiveActionBar` if this is the primary action
inProgressActionOptional
| stringA token that identifies if an action is in progress, disabling all actions. The token is acquired via the onClick handler from each action
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Destructive Action Bar?

PropertyDescriptionDefinedValue
destructiveRequired
objectThe primary destructive action
cancelRequired
objectThe alternative cancellation action
inProgressActionOptional
| stringA token that identifies if an action is in progress, disabling all actions. The token is acquired via the onClick handler from each action
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

#General

Use ActionBar when

  • Confirming choices: (e.g., "Save Changes," "Delete," "Cancel")
  • Submitting information: (e.g., "Submit Form," "Complete task")
  • Navigating steps: (e.g., "Next," "Previous," "Skip")

#Placement

ActionBar is typically used in the following places:

  • Top of content: To guide users towards the next step in a process.
  • Bottom of content: For confirming choices or submitting after reviewing information.
  • Within Forms: To enable in-context actions related to the form data.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your ActionBar to existing components for visual consistency.
  • Button styles: Use primary, secondary, or default button styles to indicate action priority. Icon-only and icon with text label buttons are not currently supported.
  • Limit the total number of buttons to 3 for optimal usability.
  • Avoid combining primary and destructive actions: Never place the primary action and the destructive (delete) button in the same Action Bar.

#Interaction

  • User input safety: In forms or modals, provide separate confirmation for destructive actions to prevent accidental data loss.
  • More than 1 secondary action: The ActionBar currently supports up to 2 secondary actions as buttons. Please use them sparingly. The ActionBar component does not support ActionMenu.
  • Limit the total number of buttons to 3 for optimal usability.
  • If ActionBar are placed at the bottom of the screen, it should stick as the user scrolls.

#Do not use when

  • Standalone actions: Single, isolated actions are better suited for individual buttons.
  • Excessive actions: If numerous actions are required, explore alternative layouts, or breaking the action into multiple steps.
  • the action is not related to the progress or status of a task.

#Accessibility

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Use verbs to clearly indicate the action's outcome. View Word list.
  • Choose labels that leave no room for misinterpretation.
  • Maintain consistency with labels used in other parts of the interface.